<!DOCTYPE html>
<html>
<head>
	<title>Profile</title>
	<link rel="stylesheet"  href="css/jquery.mobile-1.3.1.min.css">
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.1.js"></script>
	<script type="text/javascript">
		school="";
		userId	=	"";
		studentId="";
		classUser="";
		type=""
		function readProfile(tx)
		{
			tx.executeSql('Select * from DEMO',[],display,errorDB);
		}
		
		function display(tx, results)
		{
			var len = results.rows.length;
			console.log("DEMO table: " + len + " rows found.");
			for (var i=0; i<len; i++){
				school = results.rows.item(i).school;
				userId= results.rows.item(i).userId;
				studentId= results.rows.item(i).studentId;
				classUser = results.rows.item(i).classUser;
				type = results.rows.item(i).type;
				console.log(" School =  " + school + " User ID: " + userId + " Student Id = " + studentId + " User class = " 
				+classUser + " Type = " + type);
			}
			var value = 
				"<tr>" + 
					"<td>" + "School" + "</td>" + "<td>"+school+"</td>" + 
				"</tr>" + 
				"<tr>" + 
					"<td>" + "Student Id" + "</td>" + "<td>"+studentId+"</td>" + 
				"<tr>"+
					"<td>" + "User ID" + "</td>" + "<td>"+userId+"</td>"+
				"</tr>"+
					"<td>" + "Class" + "</td>" + "<td>"+classUser+"</td>"+
				"</tr>";
			document.getElementById("content-table").innerHTML=value;
		}
		function errorDB(err )
		{
			console.log("Error processing SQL: " + err.code);
		}
		function displayProfile()
		{
			var db = window.openDatabase("Database","1.0","Phonegap Demo","2000000");
			db.transaction(readProfile,errorDB);
		}
		function hello()
		{
			alert("Hello");
		}
	</script>
</head>
	
<body>

	<div data-role="content">
		<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke">
			<thead>
				<tr>
					  <th data-priority="1">Attributes</th>
					  <th data-priority="persist">Profile</th>
				</tr>
			</thead>
			<tbody id = "content-table">
				
			</tbody>
		</table>
		
	</div>
	<button onClick=displayProfile()>Show profile user</button>
</body>
</html>